import type { ReactElement } from 'react'
import type { NextPage, InferGetStaticPropsType, GetStaticProps } from 'next';
import { Button } from 'antd';
import Layout from '../components/layout'


const about = ({ userInfo }: InferGetStaticPropsType<typeof getStaticProps>) => {
  return (
    <div>
      <h2>About</h2>
      <Button type="primary">Button</Button>
      <p>
        { userInfo.name }
      </p>
      <p>
        { userInfo.age }
      </p>
      {/* <ul>
        {posts.map((post: Post) => (
          <li key={post.title}>{post.title}</li>
        ))}
      </ul> */}
    </div>
  );
}

export const  getStaticProps: GetStaticProps = async () => {
  const res = await fetch('http://localhost:3000/api/hello')
  const userInfo = await res.json()
  return {
    props: {
      userInfo
    },
  }
}

export default about;

about.getLayout = function getLayout(page: ReactElement) {
  return (
    <Layout>
      {page}
    </Layout>
  )
}
